<template>
  <div>
    <el-button style="padding:5px 0 15px 0" icon="el-icon-tickets" @click="downloadFile" type="text">{{
      file.name
    }}</el-button>
  </div>
</template>
<script>
export default {
  props: ["file"],
  computed: {
    headers() {
      return {
        Authorization: this.$store.getters.token,
      };
    },
  },
  methods: {
    getBlob(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    save(blob, filename){
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, filename);
        } else {
          const link = document.createElement("a");
          const body = document.querySelector('body');
          link.href = window.URL.createObjectURL(blob);
          link.download = filename;

          // fix Firefox
          link.style.display = "none";
          body.appendChild(link);

          link.click();
          body.removeChild(link);

          window.URL.revokeObjectURL(link.href);
        }
    },
    async downloadFile() {
       this.getBlob(this.file.url).then(blob=>{
        this.save(blob,this.file.name)
       })
    }
  },
};
</script>